<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-画固定位置的点</title>

</head>
<body>
    <canvas id="canvas" width = "400" height = "400"></canvas>
</body>
<script src="../lib/webgl-utils2.js"></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
        void main() {
          gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
          gl_PointSize = 10.0;
        }
    </script>

<script id="2d-fragment-shader" type="x-shader/x-fragment">
        void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    </script>
</html>
<script>
    // Get A WebGL context 获取一个上下文
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("experimental-webgl");

    // setup a GLSL program 设置一个着色器描述语言 即设置顶点着色器，片元着色器
    var program = createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
    gl.useProgram(program);

    //清理背景色
    gl.clearColor(0.0,0.0,0.0,1.0);

    //清理画布
    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1);
</script>

